'use strict';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import IceCard from '@icedesign/card';
import './FeatureDisplay.scss';
import IceContainer from '@icedesign/container';

const data = [
  {
    title: 'Kyle Packett',
    description:
      '\"Newegg rocks. Have used them for years. Fast shipping. Great service. Easy RMAs. Can\'t go wrong here.\"',
    // imgUrl: 'https://vendorportal.newegg.com/framework/img/newegg/user/3.jpg',
      imgUrl:require('./images/3.jpg')
  },
  {
    title: 'Kyle Sundberg',
    description:
      '\"Excellent customer service, went into the back and retrieved item even though it wasn\'t ready at the time, nice product displays...\"',
    // imgUrl: 'https://vendorportal.newegg.com/framework/img/newegg/user/1.jpg'
       imgUrl:require('./images/1.jpg')
  },
  {
    title: 'Chris Umali',
    description:
      '\"Easy online ordering and will call pickup. Check holidays hours, closest on Saturday and Sunday...\" ',
    // imgUrl: 'https://vendorportal.newegg.com/framework/img/newegg/user/2.jpg'
      imgUrl:require('./images/2.jpg')
  },
];

export default class FeatureDisplay extends Component {
  static displayName = 'FeatureDisplay';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  // ICE: React Component 的生命周期

  componentWillMount() { }

  componentDidMount() { }

  componentWillReceiveProps(nextProps, nextContext) { }

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  componentWillUnmount() { }

  render() {
    return (
     
        <IceCard>
          <div style={styles.info}>
              <h2 style={styles.h2}>What Our Customers Are Saying</h2> 
              <p>Customer evaluation determines the value of products, and customer feedback is always our motivation...</p>
          
              <div style={styles.items}> 
                {data.map((item, index) => {
                  return (
                        <div key={index} style={styles.item}>
                          <img src={item.imgUrl} style={styles.image} />
                          <h3 style={styles.title}>{item.title}</h3>
                          <p style={styles.description}>{item.description}</p>
                        </div>
                      );
                })}
              </div>
          </div>
        </IceCard>
    );
  }
}

const styles = {
  info:{
    width: '100%',
    backgroundSize: 'cover',
    backgroundImage: `url(${require('./images/img3.jpg')}`,
    color: '#fff',
    textAlign: 'center',
    fontSize: '24px',
    margin:'0 auto',

  },
  items: {
      width: '80%',
      margin:'0 auto',
      position: 'abosolute',
      display: 'flex',
      cursor: 'pointer',
      left: '50%',
      top: '50%',
  },
  item: {
    width: '33%',
    paddingTop: '15px',
    textAlign: 'center',
    background: 'rgba(255,255,255,.15)',
    height: '281px',
    margin:'10px 20px',
  },
  title: { fontWeight: 'bold', fontSize: '20px' },
  image: { width: '85px', height: '85px', borderRadius: '50%',marginTop: '25px'},
  description: { fontSize: '13px', lineHeight: '25px' },
  h2:{position: 'relative',marginBottom: '20px',paddingBottom: '20px',paddingTop: '20px'},
};
